<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>HTML5图片修饰</title>
		<script type="text/javascript" src="../lufylegend-1.7.4.min.js"></script>
</head>
<body>
	<div id="legend"></div>
<script>
init(30,"legend",480,800,main);
var vertices;
var indices;
var uvtData;
var stageLayer,backLayer;
var bitmapData;
var imgData = [
	{name:"face",path:"face.jpg"}
];
var imglist;
var pointList=[];
var mouseX,mouseY;
var mouseObj;
function main(){
	LLoadManage.load(imgData,null,gameInit);
}
function gameInit(result){
	LGlobal.setDebug(true);
	imglist = result;
	bitmapData = new LBitmapData(imglist["face"]);
	stageLayer = new LSprite();
	stageLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height],true,"#000000");
	addChild(stageLayer);
	
	backLayer = new LSprite();
	backLayer.x = 100;
	backLayer.y = 100;
	stageLayer.addChild(backLayer);
	
	vertices = new Array();
	//在位图上定义了6个点
	vertices.push(0, 0);
	vertices.push(0, 120);
	vertices.push(0, 240);
	vertices.push(120, 0);
	vertices.push(120, 120);
	vertices.push(120, 240);
	vertices.push(240, 0);
	vertices.push(240, 120);
	vertices.push(240, 240);
	
	var i,obj;
	for(i = 0;i < vertices.length;i+=2){
		obj = new LSprite();
		obj.x = vertices[i];
		obj.y = vertices[i+1];
		obj.graphics.drawArc(1,"#ff0000",[0,0,10,0,2*Math.PI],true,"#ff0000");
		backLayer.addChild(obj);
		pointList.push(obj);
	}
	indices = new Array();
	//这里用之前的6个点将图形分成4个三角形
	indices.push(0, 3, 1);
	indices.push(3, 1, 4);
	indices.push(1, 4, 2);
	indices.push(4, 2, 5);
	indices.push(3, 6, 4);
	indices.push(6, 4, 7);
	indices.push(4, 7, 5);
	indices.push(7, 5, 8);
	uvtData = new Array();
	//这里是定义6各点原来应在的位置
	uvtData.push(0, 0);
	uvtData.push(0, 0.5);
	uvtData.push(0, 1);
	uvtData.push(0.5, 0);
	uvtData.push(0.5, 0.5);
	uvtData.push(0.5, 1);
	uvtData.push(1, 0);
	uvtData.push(1, 0.5);
	uvtData.push(1, 1);
	backLayer.graphics.beginBitmapFill(bitmapData);
	backLayer.graphics.drawTriangles(vertices, indices, uvtData);
	
	stageLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
	stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN,down);
	stageLayer.addEventListener(LMouseEvent.MOUSE_UP,up);
	stageLayer.addEventListener(LMouseEvent.MOUSE_MOVE,move);
}	
function onframe(){
	var i,obj;
	for(i = 0;i < pointList.length;i++){
		obj = pointList[i];
		obj.alpha = 1;
		if(Math.pow(obj.x-mouseX,2)+Math.pow(obj.y-mouseY,2) < Math.pow(10,2)){
			obj.alpha = 0.5;
		}
	}
}
function down(event){
	if(mouseObj)return;
	var i,obj;
	for(i = 0;i < pointList.length;i++){
		obj = pointList[i];
		if(Math.pow(obj.x-mouseX,2)+Math.pow(obj.y-mouseY,2) < Math.pow(10,2)){
			mouseObj = obj;
			mouseObj.index = i*2;
			mouseObj.mouseX = mouseX;
			mouseObj.mouseY = mouseY;
			mouseObj.saveX = mouseObj.x;
			mouseObj.saveY = mouseObj.y;
			break;
		}
	}
	
}
function up(event){
	mouseObj = null;
}
function move(event){
	mouseX = event.offsetX - backLayer.x;
	mouseY = event.offsetY - backLayer.y;
	if(mouseObj){
		mouseObj.x = mouseX - mouseObj.mouseX + mouseObj.saveX;
		mouseObj.y = mouseY - mouseObj.mouseY + mouseObj.saveY;
		vertices[mouseObj.index] = mouseObj.x;
		vertices[mouseObj.index + 1] = mouseObj.y;
		backLayer.graphics.drawTriangles(vertices, indices, uvtData);
	}
}
</script>
<!--
<div id="mylegend1" style="position:absolute;top:480px;width:800px;z-index:1;color: #ffffff;background-color:#000000;">

</div>
<div id="mylegend2" style="position:absolute;top:480px;width:800px;z-index:1;color: #ffffff;background-color:#000000;">

</div>
-->
	</body>
</html>